* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
  font-family: "Source Sans 3", sans-serif;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: black;
}

:root{
    --accent-color: #4682b4;
      --bg-color: #080808;
    --second-bg-color: #131313;
    --text-color: white;
    --main-color: #19e6d8;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400&display=swap);
}

.highlights{
  color: #e84c43;
}
/* Grundlayout für das Banner */
.banner {
  text-align: center;
    width: 100%;
    height: 23px; /* Höhe des Banners */
    background-color: rgba(84, 135, 245, 0); /* Hintergrundfarbe */
    color: white;
    overflow: hidden; /* Versteckt Text, der außerhalb des Banners liegt */
    position: fixed;
    top: 0; /* Am oberen Rand fixiert */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1000; /* Überlagert andere Elemente */
}

.banner-text {
    width: 100%; /* Die Breite des Containers auf 100% des Bildschirms setzen */
    overflow: hidden; /* Verhindert, dass der Text außerhalb des Containers sichtbar ist */
}

#scroll-container {
    display: flex;
    white-space: nowrap; /* Verhindert, dass der Text umbricht */
    animation: scroll-left 30s linear infinite; /* Animiert den Text von rechts nach links */
}

/* Einzelne Textabschnitte */
.scrolling-text {
    display: inline-block;
    margin-right: 600px; /* Abstand zwischen den Texten */
}

/* Die Animation für den Text, der von rechts nach links scrollt */
@keyframes scroll-left {
    from {
        transform: translateX(100%); /* Startet rechts außerhalb des Bildschirms */
    }
    to {
        transform: translateX(-190%); /* Beendet links außerhalb des Bildschirms */
    }
}

.typing {
  min-height: 200px;
  text-align: center;
  font-size: 6em;
  animation: scaleUpAndMove 2s forwards 3s;
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: 800;
  color: #c93027;
  z-index: 1002;
  position: relative;
  
  &::before {
    content: '';
    animation: text 2s 1s step-end forwards;
    
  }

  &::after {
    content: '';
    display: inline-block;
    width: 0;
    animation: chars 2s 0.5s step-end 1.11;
  }
}

@keyframes text {
  0%  { content: 'A'; }
  5%  { content: 'A&'; }
  10%  { content: 'A&T'; }
  15%  { content: 'A&T '; }
  20%  { content: 'A&T W'; }
  30%  { content: 'A&T We'; }
  40%  { content: 'A&T Web'; }
  50%  { content: 'A&T WebD'; }
  60%  { content: 'A&T WebDe'; }
  70%  { content: 'A&T WebDes'; }
  80%  { content: 'A&T WebDesi'; }
  90%  { content: 'A&T WebDesig'; }
  100%  { content: 'A&T WebDesign'; }
}

@keyframes chars {
  0%  { content: 'a'; }
  2%  { content: 'M'; }
  4%  { content: 'b'; }
  6%  { content: 'N'; }
  8%  { content: 'c'; }
  10%  { content: 'O'; }
  12%  { content: 'd'; }
  14%  { content: 'P'; }
  16%  { content: 'e'; }
  18%  { content: 'T'; }
  20%  { content: 'f'; }
  22%  { content: 'R'; }
  24%  { content: 'g'; }
  26%  { content: 'S'; }
  28%  { content: 'h'; }
  30%  { content: 'T'; }
  32%  { content: 'i'; }
  34%  { content: 'U'; }
  36%  { content: 'j'; }
  38%  { content: 'V'; }
  40%  { content: 'k'; }
  42%  { content: 'W'; }
  44%  { content: 'l'; }
  46%  { content: 'X'; }
  48%  { content: 'm'; }
  50%  { content: 'Y'; }
  52%  { content: 'n'; }
  54%  { content: 'Z'; }
  56%  { content: 'o'; }
  58%  { content: 'A'; }
  60%  { content: 'p'; }
  62%  { content: 'B'; }
  64%  { content: 'q'; }
  66%  { content: 'C'; }
  68%  { content: 'r'; }
  70%  { content: 'D'; }
  72%  { content: 's'; }
  74%  { content: 'E'; }
  76%  { content: 't'; }
  78%  { content: 'F'; }
  80%  { content: 'u'; }
  82%  { content: 'G'; }
  84%  { content: 'v'; }
  86%  { content: 'H'; }
  88%  { content: 'w'; }
  90%  { content: 'I'; }
  92%  { content: 'x'; }
  94%  { content: 'J'; }
  96%  { content: 'y'; }
  98%  { content: 'K'; }
}

@keyframes scaleUpAndMove{
    from {
        transform: scale(1) translate(-50%, -50%);
    } to {
      transform: scale(0.6) translate(-82%, -75vh);
    }
}

.video-text-container, .links {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.video-text-container.visible, .links.visible {
  opacity: 1;
}

.video-text-container {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    flex-direction: column;
}

#background-video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.text-mask {
    position: absolute;
    width: 100%;
    background-color: black;
    color: white;
    font-size: clamp(3rem, 8vw, 8rem);
    text-align: center;
    mix-blend-mode: darken;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.text-mask h1 {
    position: relative;
    margin: 0;
    line-height: 0.9;
    overflow: hidden;
    white-space: nowrap;
}

.text-mask h1 span {
    display: block;
    position: relative;
}

.text-mask h1 span:first-child {
    transform: translateY(-10%);
}

.text-mask h1 span:last-child {
    transform: translateY(10%);
}

.links-holder{
  height: 300px;
  overflow: hidden;
  display: block;
}

.links {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 100%;
  padding: 10px 20px;
  border-top: 1px solid white;
}

/* Links im .left Container flexen */
.links .left {
  display: flex;
  flex-wrap: wrap; /* Erlaubt das Umbrechen in mehrere Zeilen */
}

.links .left a {
  width: auto;
  padding: 10px;
  white-space: nowrap; /* Verhindert, dass der Text in den Links umbricht */
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
  .links {
      flex-direction: column; /* Ändere die Anordnung zu vertikal */
      position: static; /* Entferne das absolute Positionieren */
      width: 100%; /* Breite anpassen */
      padding: 20px;
      border-top: none; /* Optional: Entferne die Border, falls nicht mehr benötigt */
  }

  .links .left {
      justify-content: center; /* Zentriere die Links im flex-wrap-Modus */
      gap: 5px; /* Weniger Abstand zwischen den Links, wenn vertikal */
  }

  .links .right {
      width: 100%; /* Die rechten Links sollen die volle Breite einnehmen */
      text-align: center;
      margin-top: 10px;
  }

  .links .left a {
      flex: 1 1 30%; /* Jedes Link-Element soll 30% des Containers einnehmen und sich flexibel anpassen */
      text-align: center;
      margin-bottom: 10px;
  }
}


.links .left, .links .right {
    display: flex;
}

.links .right {
    justify-content: flex-end;
}

.links a {
    display: inline-block; /* Behält den Block-Layout-Stil für jeden Link bei */
    width: max-content; /* Stellt sicher, dass die Breite auf den Inhalt basiert */
    min-width: 200px; /* Du kannst dies anpassen, basierend auf der längsten Textlänge */
    text-align: left; /* Behalte die linke Ausrichtung für den Text bei */
    white-space: nowrap; /* Verhindert, dass der Text auf kleinere Bildschirme umbricht */
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    position: relative;
    opacity: 0;
    transform: translateY(500px); /* Startposition weiter unten */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Sanfte Übergänge */
}

.showing .left a,
.showing .right a {
    opacity: 1;
    transform: translateY(0); /* Endposition */
}
.links a:hover {
    color: #e84c43;
    cursor: pointer;
}

.hidden {
  display: none;
}

/* Media Queries für mobile Geräte */
@media (max-width: 865px) {
  .right a{
    width: 100%;
    text-align: center;
  }
    .text-mask {
        font-size: clamp(2rem, 6vw, 6rem);
    }

    .links a {
        font-size: 1rem;
    }
    .typing{
      font-size: 4.5em;
    }

    .links{
      margin-bottom: 50px;
    }
}

@media (max-width: 750px) {
  .video-text-container{
      max-height: 500px;
  }
}

@media (max-width: 480px) {

    .links a {
        font-size: 1rem;
    }

    .text-container-scroll h2 {
        font-size: 2rem;
    }

    .video-text-container{
      align-items: flex-start;
      max-height: 200px;
      margin-bottom: 30px;
    }
    .typing{
      top: 55%;
      font-size: 2.5em;
    }

    .text-container-scroll p {
        font-size: 1.2rem;
    }
}

.section-holder{
  display: flex;
  flex-direction: column;
  background-color: #131212;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}

/* Initialer Stil der Scrolling Images Section */
.scrolling-images-section {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 95vh;
  background-image: url('../images/bg.jpg');; /* Ersetze mit deinem Bild */
  background-attachment: fixed; /* Für den Parallax-Effekt */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Das Bild füllt den Bereich */
  margin-top: 75px;
  opacity: 0;
  transition: 1s ease-in-out;
}

/* Stil für die weiße Hintergrundfarbe nach Scrollen */
.scrolled-white {
  opacity: 1;
  transition: 1s ease-in-out;
    background-color: rgb(15, 23, 42);; /* Hintergrundfarbe nach Scrollen */
}
.scrolled-color{
  transition: 1s ease-in-out;
  color: #29415547;
}

/* Sicherstellen, dass der Text in der weißen Sektion schwarz wird */
.scrolled-white h2, .scrolled-white p {
    color: black; /* Textfarbe für die gescrollte weiße Sektion */
}


/* Optional: Den Links (navigation) mehr Padding nach unten geben */
.links {
  z-index: 99999;
    padding-bottom: 20px; /* Abstand unterhalb der Links-Sektion */
}

.text-container-scroll{
  margin-top: 50px;
    display: flex;
    flex-direction: row;
}

.text-container-scroll h2{
    padding-left: 160px;
    font-size: 5rem;
    margin-bottom: 100px;
}

.text-container-scroll p{
  display: flex;
  font-size: 2rem;
  margin-left: 100px;
  padding-right: 150px;
  align-items: baseline;
  margin-bottom: 140px;
  max-width: 1077px;
  margin-top: 50px;
}



@media (max-width: 1130px) {
  .text-container-scroll{
    max-width: 100%;
    overflow: hidden;
  }
  .text-container-scroll p{
    display: flex;
    font-size: 1.8rem;
    margin-left: 100px;
    padding-right: 20px;
    align-items: flex-end;
    margin-bottom: 100px;
}

@media (max-width: 843px) {
  .text-container-scroll{
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .text-container-scroll p{
    display: flex;
    font-size: 1.5rem;
    margin-left: 100px;
    padding-right: 20px;
    align-items: flex-end;
    margin-bottom: 100px;
  }
  .text-container-scroll h1{
    font-size: 1.8rem;
  }
}
@media (max-width: 700px) {
  .scrolling-images-section{
    margin-top: 50px;
  }
  
}

@media (max-width: 1023px) {
  .text-container-scroll{
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .text-container-scroll p{
    display: flex;
    font-size: 1.5rem;
    margin-left: 5px;
    padding-right: 5px;
    align-items: center;
    text-align: center;
    margin-bottom: 100px;
  }
  .text-container-scroll h2{
    font-size: 3.5rem;
    padding-left: 0;
    margin: 10px 0px;
    width: 100%;
    text-align: center;
  }

}
}

.slider-wrapper {
  display: flex;
  position: relative;
  width: 85vw;
  overflow: hidden; /* Versteckt den Überlauf der Elemente */
  margin: auto;
  min-height: 480px;
  max-width: 3480px;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 3rem;
  font-weight: bold;
  margin-right: 6%;
  padding: 10px;
  margin-bottom: 4.5%;
}

@media (max-width: 1023px) {
  .vertical-text{
    display: none;
  }
  
}

.image-container {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth; /* Sanftes Scrollen */
  width: 100%;
  white-space: nowrap;
  max-width: 3480px;
}


.image-container::-webkit-scrollbar {
    display: none;
}

.scrolling-divs {
  display: flex;
  transition: transform 0.4s ease-in-out; /* Sanfter Übergang beim Verschieben */
}

/* Scrollbars für Webkit-basierte Browser wie Chrome und Safari anpassen */
.scrolling-divs::-webkit-scrollbar {
    height: 8px; /* Höhe der Scrollbar für horizontales Scrollen */
}

.scrolling-divs::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Farbe der Scrollbar */
    border-radius: 10px; /* Abgerundete Ecken der Scrollbar */
}

.hover-container {
  width: 300px;
  margin-right: 20px;
  background-color: #ccc;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.hover-container h1, .hover-container p {
  margin: 0;
  width: 100%;
  white-space: normal; /* Sorgt dafür, dass der Text umbricht und nicht in einer Zeile bleibt */
}
.slider-btn {
  top: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 1.7rem;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.icon-style {
  font-size: 3rem; /* Größe der Icons */
  color: #e84c43;  /* rote Farbe */
  margin-right: 10px; /* Abstand zum Text */
  margin-bottom: 20px;
  vertical-align: middle; /* Vertikal mittig ausrichten mit dem Text */
}


.slider-btn:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Ändert die Hintergrundfarbe */
  transform: scale(1.2); /* Vergrößert den Button leicht */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); /* Fügt einen Leuchteffekt hinzu */
}

.slider-btn:active {
  transform: scale(0.9); /* Schrumpft den Button bei Klick */
  background-color: rgba(0, 0, 0, 1); /* Macht den Hintergrund dunkler beim Klicken */
  transition: transform 0.1s ease; /* Schnellere Animation beim Klicken */
}
.arrow-container {
  right: 10%;
  display: flex; /* Ordnet die Pfeile nebeneinander an */
  gap: 20px; /* Fügt Abstand zwischen den Pfeilen hinzu */
  margin-bottom: 20px;
  margin-right: 7.5%;
}


.arrow-holder{
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: end;
}


/* Für Firefox Scrollbars verstecken */
.scrolling-divs {
  scrollbar-width: none;
  margin: 35px 0 50px 25px;
}

.hover-container:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}


.hover-container:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(1.1); /* Vergrößerung bei Hover */
}

/* Entfernen von nicht benötigten Klassen und Animationen */
#scroll-container, .scrolling-text {
  display: none; /* Entfernen oder auskommentieren, falls diese Teile nicht mehr verwendet werden */
}



.scrolled-white h2 {
  margin-top: 25px;
    color: white;
}
.scrolled-white p
{color: rgb(217 236 255 / 79%); }


.hover-container {
  background-color: #2C2C2C;
  color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  width: 350px;
  height: 450px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-container h1 {
  font-size: 1.5em;
  color: rgb(148, 163, 184);
  margin-bottom: 10px;
}

.hover-container p {
  font-size: 1.3em;
  line-height: 1.5;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
}

.hover-container:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
}

.scrolling-divs::-webkit-scrollbar {
  height: 12px;
}

.scrolling-divs::-webkit-scrollbar-track {
  background: #3a3a3a;
}

.scrolling-divs::-webkit-scrollbar-thumb {
  background: #4682b4;
  border-radius: 10px;
}



@media (max-width:550px) {
  .text-container-scroll p{
    font-size: 1.2rem;
    margin: 0px 18px;
    padding: 0;
    text-align: center;
    margin-bottom: 20px;
  }

  .scrolling-images-section{
    min-height: 70vh;
  }

  .slider-wrapper{
    margin: 30px;
  }
  .text-container-scroll h2{
    font-size: 2.2rem;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    margin: 0;
  }

  .image-container{
    margin: 0;
  }

  .right a{
    width: 100%;
    text-align: center;
  }

  .hover-container{
    width: 250px;
    height: 350px;
  }

  .hover-container h1{
    font-size: 1.2em;
  }

  .hover-container p{
    font-size: 1em;
  }
}

@media (max-height: 820px) {
  .scrolling-images-section {
    flex-direction: column; /* Inhalte untereinander anordnen */
    height: auto; /* Höhe flexibel */
  }
  .image-holder {
    width: 100%; /* Volle Breite für den Image-Container */
    margin-bottom: 20px; /* Abstand zum Text */
    margin-left: 50px;
  }
  .text-container-scroll {
    width: 100%; /* Text auf volle Breite */
    padding: 0 20px; /* Padding für kleine Bildschirme */
  }
}
/* Verstecke standardmäßig das Dropdown-Menü und die Links */
.links {
  display: none;
}

/* Zeige die Links an, wenn das Dropdown nicht sichtbar ist */
.links.show {
  display: flex;
}

.dropdown-holder {
  opacity: 0;
  transform: translateY(100px); /* Startposition außerhalb des Sichtbereichs */
  transition: opacity 2s ease, transform 2s ease; /* Sanfte Übergänge */
}

.dropdown-holder.show {
  opacity: 1;
  transform: translateY(0); /* Endposition im Sichtbereich */
}


/* Für mobile Geräte unter 430px: Verstecke die Links, wenn das Dropdown sichtbar ist */
@media (max-width: 550px) {
  .links {
    display: none; /* Verstecke die Links standardmäßig */
  }
  
  .links.hidden {
    display: none; /* Verstecke die Links, wenn das Dropdown sichtbar ist */
  }

  .dropdown-holder.show {
        z-index: 9999;
    display: block; /* Zeige das Dropdown-Menü an, wenn sichtbar */
  }
}

@media (max-width: 1480px) {
  .links a{
    font-size: 1.35em;
  }
  
}

@media (max-width: 1380px) {
  .links a{
    font-size: 1em;
  }
  
}

@media (max-width: 1037px) {
  .links a{
    font-size: .8em;
  }
}

@media (max-height: 900px) and (min-width: 600px) {
  .text-mask h1 {
    font-size: 25vh;
  }
}
@media (min-width: 1700px) {
  .text-container-scroll{
    max-height: 350px;
  }
  
}

.footer-links h3 {
    margin-bottom: 20px;
}